import React from 'react';
import { useRemediation } from '@/contexts/RemediationContext';
import { showMessage } from '@/components/common/MessageTip';
import { type ComplianceItem, ComplianceStatus, RiskLevel } from '@/types/work';
import { type RemediationFormData } from '@/types/Remediation';
import { useBusiness } from '@/stores/useBusinessStore';
import { CheckCircle } from 'lucide-react'; // 导入检查图标

// 检查项卡片组件接口
interface ComplianceItemCardProps {
  item: ComplianceItem;
  onCreateRemediation: (formData: RemediationFormData) => void;
  isUsedInRemediation: boolean; // 是否已用于创建整改项
}

/**
 * 检查项卡片组件
 * 显示检查项信息，并提供创建整改项的功能
 * 如果检查项已用于创建整改项，则显示绿色边框和图标
 */
const ComplianceItemCard: React.FC<ComplianceItemCardProps> = ({ 
  item, 
  onCreateRemediation,
  isUsedInRemediation
}) => {
  // 获取风险等级对应的样式类名
  const { createFromComplianceItem } = useRemediation();
  const { selectedBusiness } = useBusiness();

  const getRiskLevelClass = (level?: RiskLevel) => {
    switch (level) {
      case RiskLevel.HIGH:
        return 'tag-severity-high';
      case RiskLevel.MEDIUM:
        return 'tag-severity-medium';
      case RiskLevel.LOW:
        return 'tag-severity-low';
      default:
        return 'tag-severity-low';
    }
  };

  // 获取满足度对应的样式类名
  const getComplianceStatusClass = (status: ComplianceStatus) => {
    switch (status) {
      case ComplianceStatus.FULLY_COMPLIANT:
        return 'tag-status-resolved';
      case ComplianceStatus.PARTIALLY_COMPLIANT:
        return 'tag-status-pending';
      case ComplianceStatus.NON_COMPLIANT:
        return 'tag-status-active';
      default:
        return 'tag-issue-type';
    }
  };

  // 处理创建整改项
  const handleCreateRemediation = () => {
    if (!selectedBusiness) {
      showMessage('error', '未选择业务系统，无法创建整改项');
      return;
    }
    try {
      const formData = createFromComplianceItem(item, selectedBusiness.id);
      onCreateRemediation(formData);
      showMessage('info', '正在准备创建整改项，请确认信息');
    } catch (error) {
      showMessage('error', `创建整改项失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  };

  // 根据是否已用于创建整改项设置卡片样式
  const cardClassName = `p-4 rounded-lg mb-4 hover:border-primary transition-colors duration-200 ${
    isUsedInRemediation ? 'remediation-item-used' : 'remediation-item-unused'
  }`;

  return (
    <div className={cardClassName}>
      <div className="flex justify-between items-start mb-2">
        <h3 className="font-medium text-base">{item.title}</h3>
        <div className="flex space-x-2">
          {item.risk_level && (
            <span className={getRiskLevelClass(item.risk_level)}>
              {item.risk_level === RiskLevel.HIGH ? '高风险' : 
               item.risk_level === RiskLevel.MEDIUM ? '中风险' : '低风险'}
            </span>
          )}
          <span className={getComplianceStatusClass(item.compliance_status)}>
            {item.compliance_status === ComplianceStatus.FULLY_COMPLIANT ? '满足' : 
             item.compliance_status === ComplianceStatus.PARTIALLY_COMPLIANT ? '基本满足' : '不满足'}
          </span>
        </div>
      </div>
      
      {/* 如果已用于创建整改项，显示图标标识 */}
      {isUsedInRemediation && (
        <div className="flex items-center text-green-600 mb-2">
          <CheckCircle size={16} className="mr-1" />
          <span className="text-xs">已创建整改项</span>
        </div>
      )}
      
      <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
        {item.description || '无描述'}
      </p>
      
      <div className="flex justify-end">
        <button
          onClick={handleCreateRemediation}
          disabled={isUsedInRemediation}
          className={`px-3 py-1 rounded-md text-sm ${
            isUsedInRemediation
              ? 'bg-gray-200 text-gray-500 cursor-not-allowed'
              : 'bg-primary text-primary-foreground hover:bg-primary-hover transition-colors'
          }`}
        >
          {isUsedInRemediation ? '已创建' : '创建整改项'}
        </button>
      </div>
    </div>
  );
};

export default ComplianceItemCard;
